<template>
  <!-- 授权用户 -->
  <el-dialog
    :title="$t('system.SelectUser')"
    v-model="visible"
    top="5vh"
    append-to-body
    class="detail-dialog selectUser"
  >
    <div class="container">
      <div class="left">
        <div class="search-argument">
          <div class="searchItem">
            <el-input
              v-model="queryParams.phonenumber"
              placeholder="请输入部门/成员"
              clearable
              style="width: 270px; height: 40px"
              @keyup.enter="handleQuery"
            />
          </div>

          <div class="search-button">
            <div class="btn search" @click="handleQuery">
              <el-icon class="icon" color="#fff"> <Search /> </el-icon
              >{{ $t("common.search") }}
            </div>
            <div class="btn reset" @click="resetQuery">
              <el-icon class="icon" color="rgba(43, 193, 123, 1)">
                <Refresh /> </el-icon
              >{{ $t("common.reset") }}
            </div>
          </div>
        </div>

        <el-row>
          <el-table
            @row-click="clickRow"
            ref="refTable"
            :data="userList"
            max-height="475"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              :label="$t('system.UserName')"
              prop="userName"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="$t('system.Dept')"
              prop="dept.deptName"
              :show-overflow-tooltip="true"
            />
          </el-table>
        </el-row>
      </div>
      <div class="right">
        <div class="title">
          {{ $t("system.Selected") }}{{ checked }}/{{ total }}
        </div>
        <div class="list">
          <div v-for="user in selected" :key="user.userId" class="listItem">
            <div>{{ user.userName }}</div>
            <div class="close" @click="cancleSelete(user.userId)"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="dialogFoot">
      <div class="btns delete" @click="visible = false">
        {{ $t("common.cancel") }}
      </div>
      <div class="btns submit" @click="handleSelectUser">
        {{ $t("common.confirm") }}
      </div>
    </div>
  </el-dialog>
</template>

<script setup name="SelectUser">
import { authUserSelectAll, unallocatedUserList } from "@/api/system/role";

const props = defineProps({
  roleId: {
    type: [Number, String],
  },
});

const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");

const userList = ref([]);
const visible = ref(false);
const total = ref(0);
const checked = ref(0);
const userIds = ref([]);
const selected = ref([]);

const queryParams = reactive({
  // pageNum: 1,
  // pageSize: 10,
  roleId: undefined,
  userName: undefined,
  phonenumber: undefined,
});

// 显示弹框
function show() {
  queryParams.roleId = props.roleId;
  getList();
  visible.value = true;
}
/**选择行 */
function clickRow(row) {
  console.log(row.index);
  proxy.$refs["refTable"].toggleRowSelection(row);
}
// 多选框选中数据
function handleSelectionChange(selection) {
  selected.value = selection;
  checked.value = selection.length;
  userIds.value = selection.map((item) => item.userId);
}
// 查询表数据
function getList() {
  unallocatedUserList(queryParams).then((res) => {
    userList.value = res.rows;
    total.value = res.total;
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

const cancleSelete = (id) => {
  console.log(id);
  let index = userList.value.findIndex((item) => item.userId === id);
  console.log(index);
  proxy.$refs["refTable"].toggleRowSelection(userList.value[index]);
};
const emit = defineEmits(["ok"]);
/** 选择授权用户操作 */
function handleSelectUser() {
  const roleId = queryParams.roleId;
  const uIds = userIds.value.join(",");
  if (uIds == "") {
    proxy.$modal.msgError("请选择要分配的用户");
    return;
  }
  authUserSelectAll({ roleId: roleId, userIds: uIds }).then((res) => {
    proxy.$modal.msgSuccess(res.msg);
    if (res.code === 200) {
      visible.value = false;
      emit("ok");
    }
  });
}

defineExpose({
  show,
});
</script>

<style lang="scss">
.selectUser {
  width: 724px !important;

  .dialogFoot {
    width: 522px !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 34px;
    padding: 10px;
    margin-right: 14px;
    font-size: 14px;
    border-radius: 4px;
    user-select: none;
    cursor: pointer;
  }
  .btn.search {
    color: #fff;
    background: rgba(43, 193, 123, 1);
    &:hover {
      background: rgba(43, 193, 123, 0.85);
    }
  }

  .btn.reset {
    color: rgba(43, 193, 123, 1);
    background: rgba(43, 193, 123, 0.05);
    border: 1px solid rgba(43, 193, 123, 1);
    &:hover {
      background: rgba(43, 193, 123, 0.2);
    }
  }

  .btns {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 81px;
    height: 32px;
    padding: 10px;
    margin-right: 14px;
    font-size: 14px;
    border-radius: 4px;
    user-select: none;
    border: 1px solid rgba(220, 223, 230, 1);
    cursor: pointer;
    &:hover {
      background: rgba(0, 0, 0, 0.1);
    }
  }
  .btns.submit {
    color: #fff;
    background: rgba(43, 193, 123, 1);
    border: 1px solid rgba(43, 193, 123, 1);
    &:hover {
      background: rgba(43, 193, 123, 0.85);
    }
  }
}

.selectUser .el-dialog__body {
  .container {
    padding: 20px;
    height: 576px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      height: 100%;
      width: 72%;

      .search-argument {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .search-input {
          width: 270px;
          height: 40px;
        }

        .search-button {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 40px;
        }
      }
    }

    .right {
      padding: 10px 0 10px 30px;
      height: 100%;
      width: 27%;
      border-left: 1px solid rgba(232, 232, 232, 1);

      .title {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: rgba(56, 56, 56, 1);
      }

      .list {
        width: 100%;
        height: 500px;
        overflow-y: scroll; /* 显示垂直滚动条 */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer and Edge */

        .listItem {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 5px;
          width: 100%;
          height: 32px;
          opacity: 1;
          border-radius: 4px;
          background: rgba(247, 247, 247, 1);
          margin-bottom: 5px;

          .close {
            height: 14px;
            width: 14px;
            background: url("@/assets/images/delete.png");
            cursor: pointer;
          }
        }
      }
      .list::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
      }
    }
  }
}
</style>
